<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Template • TodoMVC</title>
  <link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
  <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
</head>

<body>
  <section class="todoapp" id="app">
    <header class="header">
      <h1>待办事项</h1>
      <input class="new-todo" placeholder="添加新任务" autofocus @keyup.enter="add" v-model="name" />
    </header>
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
      <label for="toggle-all">全选</label>
      <ul class="todo-list">
        <!-- 
          li默认是未完成状态
          li的类名如果设置为editing,则当前是编辑状态
          li的类名如果设置为completed，则是完成状态 -->
        <li :class="{completed:item.done===true}" v-for="item in list" :key="item.id">
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.done" />
            <label>{{item.name}}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
          <input class="edit" :value="item.name" />
        </li>

      </ul>
    </section>
    <!-- 没有任务,直接隐藏底部 -->
    <footer class="footer" v-show="list.length>0?true:false">
      <span class="todo-count"><strong>{{rest}}</strong> 剩余数量</span>
      <button class="clear-completed" @click="clear">清除所有已完成</button>
    </footer>
  </section>

  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        list: JSON.parse(window.localStorage.getItem('todo')) || [
          // done代表的是任务是否完成 默认情况下新任务是未完成的
          { id: 1, name: "吃饭", done: false },
          { id: 2, name: "睡觉", done: true },
          { id: 3, name: "打豆豆", done: false },
        ],
        //新任务名字
        name: "",
      },
      computed: {
        isAll: {
          // v-model="true" 表示选中,  get 的返回值 = isAll  get=true时, isAll=true  v-model="true"
          get() {
            // 小选全
            return this.list.every(item => item.done)
          },
          // 全选小,一键全选,一键全取消
          set(newVal) {
            this.list.forEach(item => {
              item.done = newVal
            });
          }
        },
        // 剩余数量, 数组中 未完成的任务的数量
        rest() {
          return this.list.filter(item => item.done === false).length
        }


      },

      methods: {
        // 删除
        del(id) {
          const index = this.list.findIndex((item) => item.id === id)
          this.list.splice(index, 1)
        },
        // 添加任务
        add() {
          if (this.name === '') {
            alert('任务不能为空')
            this.name = ''
            return
          }
          const obj = { id: +new Date(), name: this.name, done: false }
          this.list.push(obj)
          this.name = ''

        },

        // 清除所有已完成的任务
        clear() {
          // 筛选出数组中所有未完成的任务,返的回新数组, 去替换 data中的数组
          // 这样,遍历数组渲染页面的时候, 只有未完成的任务存在
          this.list = this.list.filter(item => item.done === false)
        }
      },
      // 本地存储, 侦听list本身的变化
      watch: {
        list: {
          deep: true,
          // newVal, list 里面 任何值的变化都本地存储
          handler(newVal) {
            window.localStorage.setItem('todo', JSON.stringify(newVal))
          }
        }
      }
    });
  </script>
</body>

</html>